<template>
  <div>
    <div>
      <el-input placeholder="请输入员工名进行搜索，可以直接回车搜索..." prefix-icon="el-icon-search"
                clearable
                @clear="initEmps"
                style="width: 350px;margin-right: 10px" v-model="keyword"
                @keydown.enter.native="initEmps"></el-input>
      <el-button icon="el-icon-search" type="primary" @click="initEmps">
        姓名搜索
      </el-button>
      <el-button icon="el-icon-refresh" style="background-color: palevioletred;border-color: palevioletred;color: white;" @click="initEmps('showWholeList')">
        清除筛查
      </el-button>
    </div>
    <div class="table">
      <el-table :data="emps" border stripe size="mini">
        <el-table-column type="selection" align="center" width="60"></el-table-column>
        <el-table-column prop="name" label="姓名" align="center" width="200" ></el-table-column>
        <el-table-column prop="workID" label="工号" align="center"></el-table-column>
        <el-table-column prop="email" label="电子邮件" align="center"></el-table-column>
        <el-table-column prop="phone" label="电话号码" align="center"></el-table-column>
        <el-table-column prop="department.name" label="所属部门" align="center"></el-table-column>
        <el-table-column label="归属账套" width="400" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.salary">
              <el-dialog title="账套详情" :visible.sync="vv" width="30%" :before-close="uu" :modal-append-to-body="false">
              <span>
                <table style="width: 100%">
                    <tr>
                      <td>基本工资</td>
                      <td>{{ scope.row.salary.basicSalary }}</td>
                    </tr>
                    <tr>
                      <td>交通补助</td>
                      <td>{{ scope.row.salary.trafficSalary }}</td>
                    </tr>
                    <tr>
                      <td>午餐补助</td>
                      <td>{{ scope.row.salary.lunchSalary }}</td>
                    </tr>
                    <tr>
                      <td>奖金</td>
                      <td>{{ scope.row.salary.bonus }}</td>
                    </tr>
                    <tr>
                      <td>养老金比率</td>
                      <td>{{ scope.row.salary.pensionPer }}</td>
                    </tr>
                    <tr>
                      <td>养老金基数</td>
                      <td>{{ scope.row.salary.pensionBase }}</td>
                    </tr>
                    <tr>
                      <td>医疗保险比率</td>
                      <td>{{ scope.row.salary.medicalPer }}</td>
                    </tr>
                    <tr>
                      <td>医疗保险基数</td>
                      <td>{{ scope.row.salary.medicalBase }}</td>
                    </tr>
                    <tr>
                      <td>公积金比率</td>
                      <td>{{ scope.row.salary.accumulationFundPer }}</td>
                    </tr>
                    <tr>
                      <td>公积金基数</td>
                      <td>{{ scope.row.salary.accumulationFundBase }}</td>
                    </tr>
                    <tr>
                      <td>启用时间</td>
                      <td>{{ scope.row.salary.createDate }}</td>
                    </tr>
                    </table>
              </span>
              </el-dialog>
              <el-button type="primary" plain @click="hh">查看详情</el-button>
              <el-popover
                  placement="left"
                  title="修改工资账套"
                  @show="showPop(scope.row.salary)"
                  @hide="hidePop(scope.row)"
                  width="200"
                  trigger="click">
                <div>
                  <el-select v-model="currentSalary" placeholder="请选择" size="mini">
                    <el-option
                        v-for="item in salaries"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                  </el-select>
                </div>
                <el-button slot="reference">{{ scope.row.salary.name }}</el-button>
              </el-popover>

            </div>


            <div v-else>
              <el-popover
                  placement="left"
                  title="修改工资账套"
                  @show="showPop(scope.row.salary)"
                  @hide="hidePop(scope.row)"
                  width="200"
                  trigger="click">
                <div>
                  <el-select v-model="currentSalary" placeholder="请选择" size="mini">
                    <el-option
                        v-for="item in salaries"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                  </el-select>
                </div>
                <el-button slot="reference">暂无账套</el-button>
                </el-popover>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;justify-content: flex-end">
        <el-pagination
            background
            @size-change="sizeChange"
            @current-change="currentChange"
            layout="sizes, prev, pager, next, jumper, ->, total, slot"
            :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SalSobCfg",
  data() {
    return {
      emps: [],
      total: 0,
      currentPage: 1,
      currentSize: 10,
      currentSalary: null,
      keyword: '',
      salaries: [],
      vv: false,
      gg: false
    }
  },
  mounted() {
    this.initEmps();
    this.initSalaries();
  },
  props: {
    dialogVisible: {
      type: Boolean,
      require: true
    }
  },
  watch: {
    dialogVisible (val) {
      this.vv = val
    }
  },
  methods: {
    sizeChange(size) {
      this.currentSize = size;
      this.initEmps();
    },
    currentChange(page) {
      this.currentPage = page;
      this.initEmps();
    },
    hidePop(data) {
      // print("this.currentSalary"+this.currentSalary)
      // print("scope.row.salary.id"+scope.row.salary.id)
      if ((data.salary==null && this.currentSalary!=null) || (this.currentSalary!=data.salary.id)) {
        this.putRequest('/salary/sobcfg/?eid=' + data.id + '&sid=' + this.currentSalary).then(resp => {
          if (resp) {
            this.initEmps()
          }
        });
      }
    },
    showPop(data) {
      if (data) {
        this.currentSalary = data.id;
      } else {
        this.currentSalary = null;
      }
    },
    initSalaries() {
      this.getRequest("/salary/sobcfg/salaries").then(resp => {
        if (resp) {
          this.salaries = resp;
        }
      })
    },
    initEmps(type) {
      let url = "/salary/sobcfg/?page=" + this.currentPage + '&size=' + this.currentSize;
      if (type && type == 'showWholeList') {
      } else {
        url += "&name=" + this.keyword;
      }
      this.getRequest(url).then(resp => {
        if (resp) {
          this.emps = resp.data;
          this.total = resp.total;
        }
      })
    },
    uu () {
      this.vv = false
    },
    hh () {
      this.vv = true
    }
  }
}
</script>

<style>
.table{
  margin-top: 10px;
}
.el-table th {
  background-color: #F5F7FA !important;
  color:#303133 !important;
}
</style>